import React from 'react';
import {
  Table, Button, Divider, Modal, Input, message,
} from 'antd';
import { ecnList } from 'services/task';
import { sendMessageToAll } from 'services/process';
import { getToken, getUserId } from 'services/token';
import { defaultRejectHandler } from 'utils/http';
import ApiModal from './Modal';

const { TextArea } = Input;

export default class Task extends React.Component {
  constructor() {
    super();
    this.state = {
      dataSource: [],
      visible: false,
      apis: [],
      messageVisible: false,
      ecn: '',
    };
  }

  getDeviceList = () => {
    ecnList().then((data) => {
      this.setState({ dataSource: data });
    }, defaultRejectHandler);
  }

  sendMessage = () => {
    const { inputRef: { state: { value } }, state: { ecn } } = this;
    const userId = getUserId(getToken());
    const data = {
      from: userId,
      ecnId: ecn,
      message: {
        device: ecn,
        content: value,
      },
    };
    sendMessageToAll(data).then(() => {
      message.success('通知成功');
      this.setState({ messageVisible: false });
    }, defaultRejectHandler);
  }

  componentDidMount() {
    this.getDeviceList();
  }

  onCancel = () => {
    this.setState({ visible: false });
  }

  render() {
    const {
      dataSource, visible, apis, messageVisible, ecn,
    } = this.state;
    const columns = [
      {
        title: '设备名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '描述',
        dataIndex: 'description',
        key: 'description',
      },
      {
        title: '来源',
        dataIndex: 'source',
        key: 'source',
      },
      {
        title: '操作',
        key: 'action',
        render: (record) => (
          <>
            <Button
              style={{ marginRight: '10px' }}
              size="small"
              onClick={() => {
                this.setState({
                  visible: true,
                  apis: record.apis,
                });
              }}
            >
              查看api接口
            </Button>
            <Divider type="vertical" orientation="left" />
            <Button
              style={{ marginRight: '10px' }}
              size="small"
              onClick={() => {
                const { history } = this.props;
                const { instanceId } = record;
                history.push({ pathname: 'taskDetail', search: instanceId });
              }}
            >
              查看任务列表
            </Button>
            <Divider type="vertical" orientation="left" />
            <Button
              style={{ marginRight: '10px' }}
              size="small"
              type="primary"
              onClick={() => {
                this.setState({
                  messageVisible: true,
                  ecn: record.instanceId,
                });
              }}
            >
              通知管理员
            </Button>
          </>
        ),
      },
    ];
    const title = `ecn:${ecn}`;
    return (
      <>
        <Table
          columns={columns}
          dataSource={dataSource}
          size="middle"
          rowKey="name"
        />
        <ApiModal visible={visible} dataSource={apis} onCancel={this.onCancel} />
        <Modal
          title={title}
          visible={messageVisible}
          onOk={this.sendMessage}
          onCancel={() => this.setState({ messageVisible: false })}
        >
          <TextArea
            row={4}
            ref={(input) => { this.inputRef = input; }}
          />
        </Modal>
      </>
    );
  }
}
